<template>
  <view class="container">
    <!-- <view class="filters">
      <picker mode="selector" :range="shops" range-key="name" v-model="selectedShopIndex" @change="fetchOrders">
        <view class="picker">{{ selectedShopIndex === null ? '所有门店' : shops[selectedShopIndex].name }}</view>
      </picker>
      <input type="text" placeholder="搜索订单" v-model="searchTerm" @input="fetchOrders" />
    </view> -->
    <view class="segmented-control">
      <uni-segmented-control
        :current="currentTab"
        :values="['开方订单', '充值订单', '次卡订单']"
        @clickItem="onTabChange"
      />
    </view>
    <view class="content">
      <view v-if="currentTab === 0">
        <text class="title">商城订单</text>
        <uni-table :border="true">
          <uni-tr>
            <uni-th>订单编号</uni-th>
            <uni-th>备注</uni-th>
            <uni-th>会员</uni-th>
            <uni-th>金额</uni-th>
            <uni-th>操作</uni-th>
          </uni-tr>
          <uni-tr v-for="order in shopOrders" :key="order.id">
            <uni-td>{{ order.order_number }}</uni-td>
            <uni-td>{{ order.note }}</uni-td>
            <uni-td>{{ order.member_name }}</uni-td>
            <uni-td>{{ order.total_amount }}</uni-td>
            <uni-td>
              <uni-button type="primary" size="mini" @click="viewDetails(order.id)">详情</uni-button>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
      <view v-if="currentTab === 1">
        <text class="title">充值订单</text>
        <uni-table :border="true">
          <uni-tr>
            <uni-th>订单编号</uni-th>
            <uni-th>充值门店</uni-th>
            <uni-th>充值时间</uni-th>
            <uni-th>金额</uni-th>
            <uni-th>操作</uni-th>
          </uni-tr>
          <uni-tr v-for="order in verifyOrders" :key="order.id">
            <uni-td>{{ order.order_number }}</uni-td>
            <uni-td>{{ order.store_name }}</uni-td>
            <uni-td>{{ order.charge_time }}</uni-td>
            <uni-td>{{ order.charge_amount }}</uni-td>
			
            <uni-td>
              <uni-button type="primary" size="mini" @click="viewDetails(order.id)">详情</uni-button>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
      <view v-if="currentTab === 2">
        <text class="title">次卡订单</text>
        <uni-table :border="true">
          <uni-tr>
            <uni-th>会员卡号</uni-th>
            <uni-th>项目名称</uni-th>
            <uni-th>时间</uni-th>
            <uni-th>金额</uni-th>
            <uni-th>操作</uni-th>
          </uni-tr>
          <uni-tr v-for="order in subCardOrders" :key="order.id">
            <uni-td>{{ order.card_number }}</uni-td>
            <uni-td>{{ order.name }}</uni-td>
            <uni-td>{{ order.created_at }}</uni-td>
            <uni-td>{{ order.total_amount }}</uni-td>
           <!-- <uni-td>
              <uni-button type="default" size="mini" @click="openDetails(order)">查看详情</uni-button>
            </uni-td> -->
			<uni-td>
			  <uni-button type="primary" size="mini" @click="viewDetails(order.id)">详情</uni-button>
			</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      shopOrders: [],
      verifyOrders: [],
      subCardOrders: [],
      shops: [], // 门店列表
      selectedShopIndex: null, // 选择的门店索引
      searchTerm: '', // 搜索关键词
      userInfo: {} // 用户信息
    };
  },
  methods: {
    onTabChange(e) {
      this.currentTab = e.currentIndex;
      this.fetchOrders();
    },
    async fetchOrders() {
      let url = '';
      switch (this.currentTab) {
        case 0:
          url = '/index/plugin.orders/getShopOrders';
          break;
        case 1:
          url = '/index/plugin.orders/get_records';
          break;
        case 2:
          url = '/index/plugin.orders/getProjectUsage';
          break;
      }

      const selectedShopId = this.selectedShopIndex !== null ? this.shops[this.selectedShopIndex].id : null;

      const res = await this.$myRuquest({
        url: url,
        method: 'GET',
        data: {
          main_account_id: this.userInfo.user_id,
          shop_id: selectedShopId,
          search_term: this.searchTerm,
        },
      });

      if (res.data.code === 200) {
        switch (this.currentTab) {
          case 0:

            this.shopOrders = res.data.data;
            break;
          case 1:
            this.verifyOrders = res.data.records;
			
            break;
          case 2:
		  
            this.subCardOrders = res.data.records;
            break;
        }
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000,
        });
      }
    },
	viewDetails(orderId) {
	  // 跳转到订单详情页面
	  uni.navigateTo({
	    url: `/pages/front_end/dayin?order_id=${orderId}`
	  });
	},
    async fetchShops() {
      const res = await this.$myRuquest({
        url: '/index/plugin.orders/getStores',
        method: 'GET',
        data: {
          main_account_id: this.userInfo.user_id,
        },
      });

      if (res.data.code === 200) {
        this.shops = res.data.data;
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000,
        });
      }
    },
    openDetails(order) {
      // 处理查看详情逻辑
      console.log('查看订单详情', order);
    },
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      if (token) {
        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
        this.fetchShops();
        this.fetchOrders();
      } else {
        this.userInfo = {};
        this.$router.push('/pages/login/login');
      }
    }
  },
  mounted() {
    this.checkLoginStatus();
  },
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.segmented-control {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 10px;
  margin: 10px;
}
.filters {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.picker {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}
.search-box {
  display: flex;
  margin-bottom: 20px;
}
.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}
.search-button {
  background-color: #4cd964;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  margin-left: 10px;
}
.search-button:hover {
  background-color: #45c853;
}
.content {
  margin-top: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
